<template>
  <div class="register">
    <div class="reg_title">
      <el-steps :active="activeNum" simple>
        <el-step title="1.注册账号" icon="el-icon-edit"></el-step>
        <el-step title="2.完成" icon="el-icon-upload"></el-step>
      </el-steps>
    </div>
    <div class="reg_content">
      <el-form :model="regForm" :rules="regFormRules" ref="ruleForm" label-width="100px" label-position="top" class="demo-ruleForm">
        <el-form-item label="请输入用户名" prop="userName" class="reg_item">
          <el-input v-model="regForm.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="请输入昵称" prop="nickName" class="reg_item">
          <el-input v-model="regForm.nickName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="请输入手机号" prop="phone">
          <el-input v-model="regForm.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item prop="captchaValue">
          <div class="captchaValue_wrap">
            <el-input v-model="regForm.captchaValue" placeholder="请输入图形验证码"></el-input>
            <img :src="imgValue" alt="" class="captchaValue_item" @click="fnGetImgCode()">
          </div>
        </el-form-item>
        <el-form-item prop="Verification">
          <div class="Verification">
            <el-input v-model="regForm.smsCode" placeholder="请输入短信验证码"></el-input>
            <el-button :disabled="disabledbtn" @click="getVerication()">{{text}}</el-button>
          </div>
        </el-form-item>
        <el-form-item prop="password" label="请设置密码">
          <el-input v-model="regForm.password"></el-input>
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input v-model="regForm.rePassword" placeholder="请再次输入密码"></el-input>
        </el-form-item>
      </el-form>
      <div class="deal">
        <el-checkbox v-model="checked"></el-checkbox> <span @click="handleDeal">我已阅读并同意<span class="deal_check">《用户协议》</span></span>
      </div>
      <div class="reg_btn">
        <el-button type="primary" size="small" class="btn_foot_reg" @click="handleRegister">注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { register, getImgCode, getsendSms } from '@/api/user'
export default {
  data() {
    //验证规则 
    var validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else if (!(/^[A-Za-z0-9]{6,20}$/.test(value))) {
        callback(new Error('请输入4-15位用户名'))
      } else {
        callback();
      }
    };

    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else if (!(/^1[3456789]\d{9}$/.test(value))) {
        callback(new Error('手机号格式错误'));
      } else {
        callback()
      }
    }

    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!(/^(\w){6,20}$/.test(value))) {
        callback(new Error('密码格式错误'))
      } else {
        callback()
      }
    }
    var validatenickName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('验证码不能为空'))
      } else {
        callback()
      }
    }
    var validateVeri = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('验证码不能为空'))
      } else {
        callback()
      }
    }
    var validateSurePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请再次输入密码'));
      } else if (value != this.regForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    var validatecaptchaValue = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('图形验证码不能为空'))
      } else {
        callback()
      }
    }
    return {
      //验证规则
      regFormRules: {
        userName: [
          { validator: validateUserName, trigger: 'blur' }
        ],
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ],
        Verification: [
          { validator: validateVeri, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        rePassword: [
          { validator: validateSurePass, trigger: 'blur' }
        ],
        nickName: [
          { validator: validatenickName, trigger: 'blur' }
        ],
        captchaValue: [
          { validator: validatecaptchaValue, trigger: 'blur' }
        ]
      },

      regForm: {
        userName: '',
        password: '',
        smsCode: '',
        rePassword: '',
        phone: '',
        nickName: '',
        captchaValue: ''
      },
      timer: 60,
      text: '获取验证码',
      disabledbtn: false,
      checked: false,
      clock: '', // 定时器
      activeNum: 1, // 头部进度条
      imgValue: '', // 图形验证码 
      captchaKey: '', // 图形验证码键
    }
  },
  mounted() {
    this.fnGetImgCode()
  },
  methods: {
    //获取短信验证码
    async getVerication() {
      if (this.regForm.captchaValue && this.captchaKey) {
        let res = await getsendSms({
          captchaKey: this.captchaKey,
          captchaValue: this.regForm.captchaValue,
          phone: this.regForm.phone
        })
        if (res.code == 0) {
          this.$message.success('短信已发送')
        }
        this.disabledbtn = true
        this.text = this.timer + "s重新发送"
        this.clock = window.setInterval(() => {
          this.timer--
          this.text = this.timer + "s重新发送"
          if (this.timer < 0) {
            window.clearInterval(this.clock)
            this.text = '获取验证码'
            this.timer = 60
            this.disabledbtn = false
          }
        }, 1000);
      }

    },
    // 注册
    handleRegister() {
      if (this.checked) {
        this.$refs['ruleForm'].validate(async (valid) => {
          if (valid) {
            let res = await register(this.regForm)
            console.log(res);
            if (res && res.code == 0) {
              this.$message.success('注册成功')
              this.$router.push({
                path: '/login'
              })


            }


          } else {
            this.$message.error('数据格式不对')
          }
        })
      } else {
        this.$message.error('请勾选用户协议')
      }


    },
    // 协议详情
    handleDeal() {
      this.$router.push({
        path: '/deal'
      })
    },
    //获取图形验证码
    async fnGetImgCode() {
      let res = await getImgCode()

      if (res && res.code == 0) {
        this.imgValue = res.data.captchaImg
        this.captchaKey = res.data.captchaKey
      }
    },
  },
  // 清除定时器
  beforeDestroy() {
    clearInterval(this.clock);
    this.timer = this.clock;
  },

   head() {
    return {
      title: '12345概况-吉安12345政府服务热线',
      meta: [
        { hid: '吉安12345政府服务热线', name: '吉安12345政府服务热线', content: '吉安12345政府服务热线' }
      ],
    }
  }
}
</script>

<style scoped lang="scss">
body {
  height: 100%;
}
.register {
  width: 100%;
  height: 100%;

  .reg_title {
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
  }
  .reg_content {
    width: 60%;
    margin: 0 auto;
    margin-top: 10px;
    .captchaValue_wrap {
      display: flex;
      .captchaValue_item {
        height: 38px;
        width: 120px;
        border: 1px solid #000;
        margin-left: 10px;
      }
    }
    .reg_item {
    }
    .Verification {
      display: flex;
      .el-button {
        margin-left: 20px;
      }
    }
  }
  .deal_check {
    color: #40a9fe;
  }
  .reg_btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .btn_foot_reg {
      width: 200px;
    }
  }
}
</style>